CSP:trusted-types 初体验

之前被问到这样一个有意思的问题，为什么新版Chrome取消了XSS Audit机制？

以前看到过文章说新版Chrome取消这个的原因是因为被绕过的姿势过多(我也不知道几个)或者说是误报影响到正常功能了。并说用trusted-types的API替换XSS Audit能彻底杜绝DOM XSS。

仔细跟了一下谷歌的开发文档介绍，通过给CSP配置一个trusted-types属性：

1	Content-Security-Policy: trusted-types *

本地测试79.0版本：

<?php
header("Content-Security-Policy: trusted-types *");
$a= <<<EOF
<html>
<head>
</head>
<body>
</body>
<script>
const templateId = location.hash.match(/tplid=([^;&]*)/)[1];
// typeof templateId == "string"
document.head.innerHTML += decodeURI(templateId) // Throws a TypeError.
</script>
</html>
EOF;
echo $a;

-w1031

但是并没有抛出错误，继续翻了下文档，找到问题所在:
-w1022
需要用Chrome73-78的版本，其次默认配置是不开的，访问chrome://flags/#enable-experimental-web-platform-features将其配置打开。

这里用Chrome78测试：
-w838

-w1258

抛出一个错误，强制要求我们使用TrustedHTML，修改代码：

<?php
header("Content-Security-Policy: trusted-types *");
$a= <<<EOF
<html>
<head>
</head>
<body>
</body>
<script>
const templatePolicy = TrustedTypes.createPolicy('template', {
    createHTML: (templateId) => {
      const tpl = templateId;
      if (/^[0-9a-z-]$/.test(tpl)) {
        return `<link rel="stylesheet" href="./templates/\${tpl}/style.css">`;
      }
      throw new TypeError();
    }
  });

const html = templatePolicy.createHTML(location.hash.match(/tplid=([^;&]*)/)[1]);
// html instanceof TrustedHTML
document.head.innerHTML = html;
</script>
</html>
EOF;
echo $a;